<template>
      <div class="content">
        <el-table
          :data="tableData"
          height="435"
          :header-cell-style="headerStyle"
          class="table"
        >
          <el-table-column label="序号" type="index" width="50" align="center">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="用户账号"
            align="center"
            show-overflow-tooltip
            min-width="140"
          >
          </el-table-column>
          <el-table-column
            prop="device"
            label="登录类型"
            align="center"
            show-overflow-tooltip
            min-width="100"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.device == 'PC'" type="success">平台</el-tag>
              <el-tag v-else type="warning">小程序</el-tag>
            </template>
          </el-table-column>
  
          <el-table-column
            prop="success"
            label="登录状态"
            align="center"
            show-overflow-tooltip
            min-width="100"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.success == 1" type="danger">失败</el-tag>
              <el-tag v-else type="success">成功</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="ipaddr"
            label="登录IP地址"
            align="center"
            show-overflow-tooltip
            min-width="140"
          >
          </el-table-column>
          <el-table-column
            prop="loginLocation"
            label="登录地点"
            align="center"
            show-overflow-tooltip
            min-width="140"
          >
          </el-table-column>
          <el-table-column
            prop="browser"
            label="浏览器类型"
            align="center"
            show-overflow-tooltip
            min-width="140"
          >
          </el-table-column>
          <el-table-column
            prop="os"
            label="操作系统"
            align="center"
            show-overflow-tooltip
            min-width="140"
          >
          </el-table-column>
  
          <el-table-column
            prop="msg"
            label="操作信息"
            align="center"
            show-overflow-tooltip
            min-width="140"
          ></el-table-column>
          <el-table-column
            prop="loginTime"
            label="登录时间"
            align="center"
            min-width="160"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
  
        <pagination
          :total="total"
          :page.sync="page"
          :limit.sync="limit"
          @pagination="LoginLog"
          class="pagination"
        />
      </div>
  </template>
  
  <script>
  import tableStyleMixin from "@mixin/table-style";
  import Pagination from "@components/Pagination.vue";
  import { reqLoginLog } from "@/api/api";
  import { mapState } from "vuex";

  export default {
    name: "",
    components: { Pagination },
    mixins: [tableStyleMixin],
    data() {
      return {
        dialogVisible: false,
        tableData: [],
        page: 1,
        limit: 10,
        total: 0,
      };
    },
    computed: {
      ...mapState(["user"]),
    },
    watch: {
    },
    created() {},
    mounted() {},
    methods: {
      // 获取登录日志
      async LoginLog() {
        let res = await reqLoginLog(this.page, this.limit, {
          userId: this.user.userId,
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        //   console.log(res);
        this.tableData = res.data.rows;
        this.total = res.data.total || 0;
      },
      // 点击确定修改密码
      async addSubmit() {
        this.dialogVisible = false;
      },
      // 点击关闭弹框
      closeAddDialog() {
        this.dialogVisible = false;
      },
    },
  };
  </script>
  
  <style scoped lang="less">
@import url("~@views/style/tablePage.less");
.content{
    margin-left: 10px;
}
::v-deep .el-pagination{
  padding: 0 !important;
}
</style>
  